<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.css" rel="stylesheet" />
	<link href="../css/iconfont.css" rel="stylesheet" />
	<link href="../css/changpinlist.css" rel="stylesheet" />
	<script src="../js/jquery-1.9.1.min.js"></script>
</head>

<body>
<!--  顶部组件      -->
<header class="mui-bar mui-bar-nav head">
	<a id="toback" class="mui-action-back">
		<span class="mui-icon mui-icon-arrowleft sp5"></span>
	</a>
	<h1 class="mui-title" id="mui-title">机油</h1>
	<span class="gouwuche">
    	<i class="iconfont icon-gouwuche"></i>
	</span>
</header>
<!--  主题内容组件     -->
<div id="contents" style="padding-bottom: 20px;" class="mui-content">
	<div class="shaixuan">
		<div id="ddddd" class="shaixuan_one">
			<span>筛选</span>
		</div>
		<div class="shaixuan_one">
			<span>销量</span>
		</div>
		<div class="shaixuan_one">
			<span>价格</span>
		</div>
	</div>
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<!--数据列表-->
			<ul id="liebiao" class="mui-table-view mui-table-view-chevron">

			</ul>
		</div>
	</div>
</div>
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/go.js"></script>
<script type="text/javascript">
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
//					down: {
//						callback: pulldownRefresh
//					},
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    $.ajax({
        url:'http://www.reliants.cn/Mobile/zixun/product',
        type:'get',
        async:true,
        dataType:'json',
        success:function(data){
            var $jsontip = $("#liebiao");
            var strHtml = "";//存储数据的变量
            $jsontip.empty();//清空内容
            $.each(data,function(infoIndex,info){
                strHtml +='<div class="mui-input-row mui-checkbox mui-left">';
                strHtml +='<label style="padding-right: 0;">';
                strHtml +='<div class="label_one">';
                strHtml +='<div class="label_one_img">';
                strHtml +='<img data-id='+info.list_id+' src=' + info.list_src + '>';
                strHtml +='</div>';
                strHtml +='<div class="label_one_contain">';
                strHtml +='<p>' + info.list_p + '</p>';
                strHtml +='<span class="youhui">' + info.list_span + '</span>';
                strHtml +='<div class="label_one_contain_bottom">';
                strHtml +='<a class="a4">' + info.list_bottom_a4 + '<span class="jiaqian">' + info.list_bottom_a4_span + '</span></a>';
                strHtml +='<a class="a3">' + info.list_bottom_a3 + '<span class="jiaqian">' + info.list_bottom_a3_span + '</span></a>';
                strHtml +='</div></div></div></label></div>';
            })
            $("#liebiao").append(strHtml);
            var mian = document.getElementById('liebiao');
            var product = mian.getElementsByClassName('mui-checkbox');
            var Page = null;
            for(var i=0;i<product.length;i++){
                (function(x){
                    product[x].addEventListener('tap', function() {
                        product_id = this.getElementsByTagName('img')[0].getAttribute('data-id');
                        $.jump('changpinxiangqing.html',{
                            id:	product_id
                        });
                    });
                })(i)
            }
        },
        error:function(error){
            alert(error.responseText)
        },
    });
    //       	function pulldownRefresh() {
    //				setTimeout(function() {
    //					var table = document.body.querySelector('.mui-table-view');
    //					var cells = document.body.querySelectorAll('.mui-table-view-cell');
    //					for (var i = cells.length, len = i + 3; i < len; i++) {
    //						var li = document.createElement('li');
    //						li.className = 'mui-table-view-cell';
    //						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
    //						//下拉刷新，新纪录插到最前面；
    //						table.insertBefore(li, table.firstChild);
    //					}
    //					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
    //				}, 1500);
    //			}

    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        setTimeout(function() {
            $.ajax({
                url:'http://www.reliants.cn/Mobile/zixun/product',
                type:'get',
                async:true,
                dataType:'json',
                success:function(data){
                    var count = data.length;
//		                	alert(count);
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 5));//参数为true代表没有更多数据了。
                    var $jsontip = $("#liebiao");
                    var strHtml = "";//存储数据的变量
                    $.each(data,function(infoIndex,info){
                        strHtml +='<div class="mui-input-row mui-checkbox mui-left">';
                        strHtml +='<label style="padding-right: 0;">';
                        strHtml +='<div class="label_one">';
                        strHtml +='<div class="label_one_img">';
                        strHtml +='<img data-id='+info.list_id+' src=' + info.list_src + '>';
                        strHtml +='</div>';
                        strHtml +='<div class="label_one_contain">';
                        strHtml +='<p>' + info.list_p + '</p>';
                        strHtml +='<span class="youhui">' + info.list_span + '</span>';
                        strHtml +='<div class="label_one_contain_bottom">';
                        strHtml +='<a class="a4">' + info.list_bottom_a4 + '<span class="jiaqian">' + info.list_bottom_a4_span + '</span></a>';
                        strHtml +='<a class="a3">' + info.list_bottom_a3 + '<span class="jiaqian">' + info.list_bottom_a3_span + '</span></a>';
                        strHtml +='</div></div></div></label></div>';
                    })
                    $("#liebiao").append(strHtml);
//							var mian = document.getElementById('liebiao');
//							var product = mian.getElementsByClassName('mui-checkbox');
//		                    var Page = null;
//		                    for(var i=0;i<product.length;i++){
//								(function(x){
//		                            product[x].addEventListener('tap', function() {
//										var product_id = this.getElementsByTagName('img')[0].getAttribute('data-id');
//		                                $.jump('changpinxiangqing.html',{
//		                                    id:	product_id
//		                                });
//		                            });
//		                        })(i)
//							}
                },
                error:function(error){
                    alert(error.responseText)
                },
            });
        }, 1500);
    }
    mui.init();
</script>
<script>
mui.plusReady(function() {
    $(function(){
    	var self = plus.webview.currentWebview();
    	var id=self.urlid;
    	$("#mui-title").text(self.title);
//  	alert(self.title)
        $.ajax({
            url:'http://www.reliants.cn/Mobile/zixun/product',
            type:'post',
            data:{id:id},
            async:true,
            dataType:'json',
            success:function(data){
                var $jsontip = $("#liebiao");
                var strHtml = "";//存储数据的变量
                $jsontip.empty();//清空内容
                $.each(data,function(infoIndex,info){
                    strHtml +='<div class="mui-input-row mui-checkbox mui-left">';
                    strHtml +='<label style="padding-right: 0;">';
                    strHtml +='<div class="label_one">';
                    strHtml +='<div class="label_one_img">';
                    strHtml +='<img data-id='+info.list_id+' src=' + info.list_src + '>';
                    strHtml +='</div>';
                    strHtml +='<div class="label_one_contain">';
                    strHtml +='<p>' + info.list_p + '</p>';
                    strHtml +='<span class="youhui">' + info.list_span + '</span>';
                    strHtml +='<div class="label_one_contain_bottom">';
                    strHtml +='<a class="a4">' + info.list_bottom_a4 + '<span class="jiaqian">' + info.list_bottom_a4_span + '</span></a>';
                    strHtml +='<a class="a3">' + info.list_bottom_a3 + '<span class="jiaqian">' + info.list_bottom_a3_span + '</span></a>';
                    strHtml +='</div></div></div></label></div>';
                })
                $("#liebiao").append(strHtml);
                var mian = document.getElementById('liebiao');
                var product = mian.getElementsByClassName('mui-checkbox');
                var Page = null;
                for(var i=0;i<product.length;i++){
                    (function(x){
                        product[x].addEventListener('tap', function() {
                            var id = this.getElementsByTagName('img')[0].getAttribute('data-id');
                            mui.openWindow({
								url:"changpinxiangqing.html",
								id:"changpinxiangqing.html",
								waiting: {
								autoShow: false
								},
								extras: {
									urlid:id
								}
							});
                        });
                    })(i)
                }
            },
            error:function(error){
                alert(error.responseText)
            },
        });
    })
   
})
</script>
</body>

</html>
